<template>
  <div ref="lineChart" class="chart"></div>
</template>

<script>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'LineChart',
  props: {
    data: {
      type: Object,
      required: true,
      default: () => ({
        dailyUsers: [],
        dailyOrders: [],
        dailyRevenue: []
      })
    }
  },
  setup(props) {
    const lineChart = ref(null)
    let chart = null

    const initChart = () => {
      if (!lineChart.value) return
      
      const dailyUsers = props.data?.dailyUsers || []
      const dailyOrders = props.data?.dailyOrders || []
      const dailyRevenue = props.data?.dailyRevenue || []
      
      chart = echarts.init(lineChart.value)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['用户数', '订单数', '收入']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: dailyUsers.map(item => item.date)
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            position: 'left'
          },
          {
            type: 'value',
            name: '金额',
            position: 'right',
            axisLabel: {
              formatter: '{value} ¥'
            }
          }
        ],
        series: [
          {
            name: '用户数',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: dailyUsers.map(item => item.count)
          },
          {
            name: '订单数',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: dailyOrders.map(item => item.count)
          },
          {
            name: '收入',
            type: 'line',
            yAxisIndex: 1,
            emphasis: {
              focus: 'series'
            },
            data: dailyRevenue.map(item => item.amount)
          }
        ]
      }
      chart.setOption(option)
    }

    const updateChart = () => {
      if (!chart || !props.data) return

      const dailyUsers = props.data?.dailyUsers || []
      const dailyOrders = props.data?.dailyOrders || []
      const dailyRevenue = props.data?.dailyRevenue || []

      chart.setOption({
        xAxis: [{
          data: dailyUsers.map(item => item.date)
        }],
        series: [
          {
            data: dailyUsers.map(item => item.count)
          },
          {
            data: dailyOrders.map(item => item.count)
          },
          {
            data: dailyRevenue.map(item => item.amount)
          }
        ]
      })
    }

    watch(() => props.data, () => {
      updateChart()
    }, { deep: true })

    onMounted(() => {
      initChart()
      window.addEventListener('resize', () => {
        chart && chart.resize()
      })
    })

    onUnmounted(() => {
      if (chart) {
        chart.dispose()
        chart = null
      }
    })

    return {
      lineChart
    }
  }
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style> 